<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cart</title>
    <script src="axios/axios.js"></script>
    <script src="Vue/vue.js"></script>
    <!--<script src="Vue/vue-router.js"></script>-->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            margin: 0 auto;
            border-collapse: collapse;
        }
        td{
            width: 200px;
            height: 50px;
            text-align: center;
            border: 1px solid #757575;
        }
        button{
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
<div id="cart">
    <table>
        <tr>
            <td  v-for="(item,list) in types">{{item}}</td>
        </tr>
        <tr v-for="(item,index) in compute">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td><button @click="reduce(index)">-</button>{{item.num}}<button @click="add(index)">+</button></td>
            <td>{{item.price*item.num}}</td>
        </tr>
        <tr>
            <td colspan="5">总价￥{{payment}}</td>

        </tr>
    </table>
</div>
<script>
    var vue=new Vue({
        el:"#cart",
        data:{
           types:['编号', '名称', '单价', '数量', '总价'] ,
            compute:[
                {
                  id:1,
                  name:"apple",
                  price:3,
                  num:0,
                },
                {
                    id:2,
                    name:"pear",
                    price:4,
                    num:0,
                },
                {
                    id:3,
                    name:"banana",
                    price:5,
                    num:0,
                },
                {
                    id:4,
                    name:"MacPro",
                    price:10000,
                    num:0,
                },
            ]
        },
        methods:{
            add(k){
                this.compute[k].num++;
            },
            reduce(k){
                this.compute[k].num--;
                if(this.compute[k].num<=0){
                    this.compute[k].num=0;
                }
            }
        },
        computed:{
            payment(){
                var payment=0;
                for(var i=0;i<this.compute.length;i++){
                    payment+=this.compute[i].price*this.compute[i].num;
                }
                return payment;
            }
        }
    });
</script>
</body>
</html>